<template>
  <div class="rightbox" v-cloak>
    <h1>会员审核</h1>
    <el-row  style="width: 96%;margin:2% 2% 10px 2%;">
      <div :span="3" style="float:left">
        <el-select v-model="state" placeholder="状态">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="-1"></el-option>
        </el-select>
      </div>
      <div :span="4" style="margin-left:10px;width:120px;float:left">
        <el-input v-model="key" placeholder="关键字"></el-input>
      </div>
      <div :span="3" style="margin-left:10px;float:left">
        <el-button type="primary" @click="Search">查询</el-button>
      </div>
    </el-row>
    <el-table
    :data="contentList"
    border
    style="width: 96%;margin: 5px 2%">
      <el-table-column
        prop="createtime"
        label="注册时间">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop=""
        label="状态"
        width="260"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.state == -1" style="color: #f00">禁用</span>
          <span v-if="scope.row.state == 1" style="color: green">启用</span>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        width="100"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="Downbtn(scope)">审核</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="不通过原因"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.remarks == ''">无</div>
          <div v-if="scope.row.remarks != ''" v-for="item in scope.row.revokeAdvert" :key="item.key">{{item.value}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page" v-if="total >= pagelimit">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pagelimit"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="审核" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="审批" label-width="120">
          <el-radio v-model="form.state" label="1">启用</el-radio>
          <el-radio v-model="form.state" label="-1">禁用</el-radio>
        </el-form-item>
        <el-form-item v-if="form.state == '-1'" label="不通过原因" label-width="120">
          <el-input v-model="form.reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="notDown">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      contentList: [],
      pagelimit: 5,
      pageindex: 0,
      total: '',
      state: '1',
      key: '',
      dialogFormVisible: false,
      form: {
        state: '1',
        reason: '',
        personaluserindex: ''
      }
    }
  },
  methods: {
    Search: function () {
      var that = this
      that.$axios.request('post', '/Personal/Index', {
        state: that.state,
        key: that.name,
        pagelimit: that.pagelimit,
        pageindex: that.pageindex
      })
        .then((res) => {
          if (res.code === 0) {
            that.contentList = res.data.datalist
            that.total = res.data.total
          }
        })
    },
    Downbtn: function (scope) {
      var that = this
      that.form.personaluserindex = scope.row.personaluserindex
      that.dialogFormVisible = true
    },
    notDown: function () {
      var that = this
      if (that.form.state === '-1') {
        if (that.form.region === '') {
          that.$pub.messageTwo('理由不能为空', '提示')
          return false
        }
      }
      that.$axios.request('post', '/Personal/Examine', {
        personaluserindex: that.form.personaluserindex,
        state: that.form.state,
        remarks: that.form.region
      })
        .then((res) => {
          if (res.code === 0) {
            that.dialogFormVisible = false
            that.$pub.messageTwo('操作成功', '提示')
            that.Search()
          }
        })
    },
    handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.Search()
    }
  },
  mounted () {
    // this.getList()
  }
}
</script>
